/**
 * karin 2017/3/23
 * 年检手续办理-险种确认页面,跳转是物理返回，把结果数据写在reducers
 */
import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import AlipayJSOperation from '../../utils/alipayJSOperation'
import typeOfBrowser from '../../utils/typeOfBrowser'

// 加载actions
import {setRequirementStatus,getInsuranceDate} from '../../actions/taxConfirmAction'
// 加载json
import {defaultData, btns} from '../AnnualInspection/defaultData'
import PageBar from '../../components/common/pageBar'
import {WhiteSpace, Button} from 'antd-mobile'
import SendCxytjMessage from '../../utils/sendCxytjMessage'

// 加载样式
import Style from './index.scss'


class TaxConfirm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            insuranceDate:'',//交强险有效日期
        };
        this.documentId = this.props.params.documentId;//订单id
        this.carnumber = this.props.params.carnumber; //拿参数ID
        this.taxId = this.props.params.key; //拿参数ID
        this.mailType = this.props.params.mailType; // 拿参数ID
        this.inspectionType = this.props.params.inspectionType;// 年检类型：1，免检；2，过线检
        this.confirmType=this.props.params.confirmType;//审核类型，0=不需上传，不审核，1=必须上传审核，2=上传则需审核，不上传则不需审核

        this.showTips = this.confirmType!='0';
    }

    componentWillMount() {
        let htmlTitle = defaultData[this.taxId].htmlTitle ? defaultData[this.taxId].htmlTitle : '年检所需资料确认';

        // 添加标题
        document.querySelector("title").innerHTML = htmlTitle;
        //隐藏标题栏右键
        AlipayJSOperation.setRightButtonStatus(false);
        //设置标题
        AlipayJSOperation.setTitle(htmlTitle);
        //设置标题颜色
        AlipayJSOperation.setBarColor('#2FB3FE');
        // document.querySelector('title').innerHTML = htmlTitle;

    }

    //发送进入页面埋点
    sendInitMessage() {
        var eventId;
        switch (this.taxId) {
            case 'JQX':
                eventId = 'H5_P_Interspection_EnterInsuranceComfirmpage';
                break;
            case 'CCS':
                eventId = 'H5_P_Interspection_EnterTaxComfirmpage';
                break;
            case 'XSZ':
                eventId = 'H5_P_Interspection_EnterLicenseComfirmpage';
                break;
            case 'CLDJZ':
                eventId = 'H5_P_Interspection_EnterRegistrationcertificateComfirmpage';
                break;
            case 'SFZ':
                eventId = 'H5_P_Interspection_EnterIDComfirmpage';
                break;
        }
        SendCxytjMessage.sendMessage({
            eventId: eventId,
            attr1: this.taxId //属性1
        });
    }

    componentDidMount() {
        this.sendInitMessage();
        this.getInsuranceDate();
    }

    componentWillUnmount() {
        AlipayJSOperation.removeLeftButtonEvent();
    }


    /**
     * 事件
     *status: 资料审核状态（0.待确认
     1.已确认
     2.审核中
     3.审核通过
     4.审核失败
     5.在有效期内
     6.已过期
     7.已备好
     8.未准备）
     */
    //按钮点击
    handClick(status) {
        let eventId = '';
        switch (status) {
            case -1:
                eventId = 'H5_P_Interspection_ClickUnsure';
                break;
            case 5:
                eventId = 'H5_E_Interspection_ClickValidity';
                break;
            case 6:
                eventId = 'H5_E_Interspection_ClickExpired';
                break;
            case 7:
                eventId = 'H5_E_Interspection_Clickready';
                break;
            case 8:
                eventId = 'H5_P_Interspection_ClickUnready';
                break;
        }
        SendCxytjMessage.sendMessage({
            eventId: eventId,
            attr1: this.inspectionType //属性1
        });

        if (status == -1) {
            // 准备上传资料
            this.context.router.push(`/uploadPage/${this.taxId}/${this.documentId}/2`)

        } else {

            this.props.dispatch(setRequirementStatus({
                id: this.documentId,
                status: status,
            }, () => {
                window.history.back();
            }));
        }
    };

    //根据taxid获取按钮列表
    getButtonArray() {
        switch (this.taxId) {
            case 'JQX':
            case 'CCS':
                return  this.confirmType!='0'?btns[0]:btns[3];
            default:
                return this.confirmType!='0'?btns[1]:btns[2];
        }
    }

    //获取交强险有效日期
    getInsuranceDate() {
        if(this.taxId=='JQX'){
            this.props.dispatch(getInsuranceDate({},(date)=>{
                this.setState({
                    insuranceDate:date,
                });
            }));
        }
        else{
            this.setState({
                insuranceDate:"",
            });
        }
    }

    /**
     * 组件
     */
    render() {
        let btnDom = this.getButtonArray();
        let data = defaultData[this.taxId];
        // 执行
        return (
            <div className={Style.tax + ' darkgray font-28'}>
                <PageBar title={data.htmlTitle}/>

                {data.explain.map((item, i) => {
                    let tips=item.state;
                    if(this.state.insuranceDate&&i==0){
                        tips+=`<span class="colorf44">${this.state.insuranceDate}</span>之后`;
                    }
                    return <div key={i} className='pt30'>
                        <p dangerouslySetInnerHTML={{__html: tips}}></p>
                        <WhiteSpace size='md'/>
                        {item.img.map((img, j) => (<img key={j} src={img} width='100%' height='auto'/>))}
                    </div>
                })}


                <div className={Style.buttonContainer}>

                    {btnDom.map((item, i) => (
                        <div className={btnDom.length == 2 ? Style.twoButtons : ''} key={item.status}>
                            <button onClick={() => this.handClick(item.status)}>{item.text}</button>
                        </div>
                    ))}

                </div>
                {this.showTips ? <div className={Style.tips}>不确定该资料是否可用？<br />
                        可拍照上传经由客服审核，审核通过办理更放心。</div> : ''}

                <WhiteSpace size='lg'/>
                <div className={Style.bg}></div>
            </div>
        );
    }
}

// 默认值
TaxConfirm.defaultProps = {}
//使用context
TaxConfirm.contextTypes = {
    router: React.PropTypes.object.isRequired
}


export default connect()(TaxConfirm)